<!--
* 小组、学生选择组件
* |-- div(.stu-selector-container) 总容器
*   |-- div(.stu-selector-groups) 小组模块
*     |-- div(.stu-selector-groups-item) 遍历显示指定部门的小组
*       |-- span(.stu-selector-groups-item-span) 小组名称，点击时设置当前小组
*   |-- div(.stu-selector-students) 学生模块，只有 mode == 1 时才显示
*     |-- div(.stu-selector-students-item) 遍历显示当前小组的学生
*       |-- span(.stu-selector-students-item-span) 学生名称，点击时设置当前学生
-->
<template>
    <div class="stu-selector-container">
        <div class="stu-selector-groups">
            <div 
                class="stu-selector-groups-item" 
                v-for="(item, index) in $store.state.view.department.group_list" 
                :style="groupStyle(item)" :key="index" 
                @click="current_group = item">
                <span class="stu-selector-groups-item-span">{{item.groupName}}</span>
            </div>
        </div>
        <div class="stu-selector-students" v-if="mode === 1">
            <div 
                class="stu-selector-students-item" 
                v-for="(item, index) in current_group.studentList" 
                :style="studentStyle(item)" :key="index" 
                @click="current_student = item">
                <span class="stu-selector-students-item-span">{{item.name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            current_group: [],      // 当前小组
            current_student: {}     // 当前学生
        }
    },
    props: {
        /**
         * 显示模式标志
         *  - 1：显示小组模块、学生模块
         *  - 2：显示小组模块
         */
        mode: {
            type: Number,
            default: 1
        }
    },
    watch: {
        /**
         * 当前学生发生变化时触发，向父组件返回当前学生
         * @param {Object} v 当前学生
         */
        current_student(v) {
            if (this.mode === 1) {
                this.$emit("on-change", v.sid)
            }
        },
        /**
         * 当前小组发生变化时触发，向父组件返回当前小组
         * @param {Object} v 当前小组
         */
        current_group(v) {
            if (this.mode === 2) {
                this.$emit("on-change", v)
            }
        }
    },
    methods: {
        /**
         * 获取当前小组样式，当前小组与小组对象相等时才返回
         * @param {Object} v 小组对象
         */
        groupStyle(v) {
            if (this.current_group === v) {
                return {
                    fontWeight: "bold",
                    color: "rgb(255, 0, 0)"
                }
            }
        },
        /**
         * 获取当前学生样式，当前学生与学生对象相等时才返回
         * @param {Object} v 学生对象
         */
        studentStyle(v) {
            if (this.current_student === v) {
                return {
                    fontWeight: "bold",
                    color: "rgb(39, 101, 194)"
                }
            }
        }
    }
}
</script>

<style lang="scss">
@import "@dept/scss/selector-index.scss";
</style>